<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="/usercp/layui/css/layui.css" media="all">
      <link rel="stylesheet" href="/usercp/style/admin.css" media="all">
  </head>
  <body>
    <div class="m-site-framebody">
      <div class="layui-form" lay-filter="setting">
        <div class="layui-form-item" style="width: 360px;">
          <label class="layui-form-label">站点名称</label>
          <div class="layui-input-inline">
            <input type="text" name="name" disabled="disabled" value="" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" >
          <label class="layui-form-label">计费方式</label>
          <div class="layui-inline" style="width: 88px;display: none;" id="number">
            <div class="layui-input-inline"> <!-- 注意：这一层元素并不是必须的 -->
              <input type="text" name="number" id="number_input" placeholder="开通时长" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline" style="width: 148px;">
            <select name="type" id="type" lay-filter="type">
              <option value="forever">永久</option>
              <option value="year">年</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item" style="width: 360px;">
          <label class="layui-form-label">应付金额</label>
          <div class="layui-input-inline">
            <input type="text" name="fee" id="fee" disabled="disabled" value="" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" style="width: 360px;">
          <label class="layui-form-label">可用余额</label>
          <div class="layui-input-inline">
            <input type="text" name="balance" id="balance" disabled="disabled" value="" autocomplete="off" class="layui-input">
          </div>
        </div>
        消费记录
        <hr>
        <table id="renew_lists" lay-filter="renew_lists"></table>
        <div class="layui-form-item layui-hide">
          <input type="button" id="LAY-user-front-submit" value="确认">
          <input type="button" lay-filter="LAY-user-front-submit" lay-submit  value="" hidden>
        </div>  
      </div>
    </div>
    <style>
      html {
        background-color: #fff;
      }
      .m-site-framebody {
        padding: 10px 15px;
      }
      .m-site-framebody-header {
        margin-bottom: 20px;
        padding-bottom: 10px;
        font-size: 14px;
        border-bottom: 1px solid #e6e6e6;
      }
      .layui-table, .layui-table-view {
        margin: 0;
      }
    </style>
      <script src="/usercp/layui/layui.js"></script>
    <script>
    layui.use(['form','table'], function(){
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;
        var row = window.parent.ooob;
        site_id = row.id;
        form.val('setting',{
          'name':row.name
        })

        table.render({
          elem: '#renew_lists',
          height: 312,
          url: '/usercp/site_operate/site_renew_record/?site_id='+site_id, //数据接口
          page: true, //开启分页
          cols: [[ //表头
            {field: 'custom_name', title: '操作人'},
            {field: 'action_text', title: '操作类型'},
            {field: 'cost', title: '消费金额'},
            {field: 'number_text', title: '计费时长'},
            {field: 'create_time', title: '操作时间'},
          ]],
          skin:'nob',
          even:false,
          page: true
            ,limit: 30
            ,height: 'full-220'
            ,text: '对不起，加载出现异常！'
            ,response: {
              statusName: 'code' //规定数据状态的字段名称，默认：code
              ,statusCode: 200 //规定成功的状态码，默认：0
              ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
              ,countName: 'count' //规定数据总数的字段名称，默认：count
              ,dataName: 'data' //规定数据列表的字段名称，默认：data
            }
            ,parseData: function(res){ //res 即为原始返回的数据
              return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.data //解析数据列表
              };
            }
        });
        get_fee('forever')

        form.on('select(type)', function(data){
            var number_choose = document.getElementById("number");
            if(data.value == 'year' || data.value == 'quarter' || data.value == 'month'){
                number_choose.style.display = '';
                $('#number_input').attr('lay-verify','required|number');
                if($('#number_input').val() != ''){
                    get_fee(data.value,$('#number_input').val())
                }
            }else{
                number_choose.style.display = 'none';
                $('#number_input').removeAttr('lay-verify');
                get_fee(data.value)
            }
        }); 

        $('#number_input').keyup(function(){
            var number_input = $('#number_input').val();
            var type_select = $('#type').val();
            get_fee(type_select,number_input)
        })

        function get_fee(type,value){
            value = parseInt(value);
            if(type != 'forever' && (isNaN(value) || !value)){
                $('#fee').val(0);
                form.render('select');
                return false;
            }
            $.get('/usercp/site/get_renew_fee', {'type':type,'number':value,'site_id':site_id}, function (data) {
                var $fee = 0;
                if(data.data != null){
                    $('#fee').val(data.data.fee);
                    $('#balance').val(data.data.balance)
                    form.render('select');
                 }
            })      
        }


        $('#LAY-user-front-submit').click(function(){
          layer.confirm('提交后将从余额中扣除消费金额，是否确认？', function(index){
              $('body').find('[lay-submit]').click();
              layer.close(index);
          });
        })
        
        // 监听提交，测试用例
        form.on('submit(form)', function(data){
          data.field.id = site_id;
          var field = data.field;
          $.ajax({
                  url: '/usercp/site/renew',
                  type: "POST",
                  data: field,
                  dataType: 'json',
                  success: function (res) {
                    if (res.code == 0){
                        layer.msg(res.msg, {
                          offset: '50px'
                          ,icon: 2
                          ,anim: 6
                          ,time: 1000
                        }, function(){});
                        return false;
                      }else{
                        layer.msg('续费成功！', {
                          offset: '15px'
                          ,icon: 1
                          ,time: 1000
                        }, function(){
                      });
                    }
                    return false;
                  }
              })
        });
    });
    </script>
  </body>
</html>
